<?php $path = base_url().'public/frontend/';?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Petshop</title>
    <link href="<?php echo $path ;?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/prettyPhoto.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/price-range.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/animate.css" rel="stylesheet">
	<link href="<?php echo $path ;?>css/main.css" rel="stylesheet">
	<link href="<?php echo $path ;?>css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="<?php echo $path ;?>js/html5shiv.js"></script>
    <script src="<?php echo $path ;?>js/respond.min.js"></script>


    <![endif]-->
    <script src="<?php echo $path ;?>js/jquery.js"></script>

    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $path ;?>images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $path ;?>images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $path ;?>images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<?php echo $path ;?>images/ico/apple-touch-icon-57-precomposed.png">
    <style type="text/css">
        .dropdown-menu1:before {
            border-bottom: 7px solid #C3C3C3;
            border-left: 7px solid rgba(0, 0, 0, 0);
            border-right: 7px solid rgba(0, 0, 0, 0);
            content: "";
            display: inline-block;
            zoom: 1;
            left: auto;
            position: absolute;
            right: 17px;
            top: -7px;
        }
        .dropdown-menu1 {
            position: absolute;
            top: 130%;
            left: 70%;
            z-index: 1000;
            display: block;
            float: left;
            min-width: 150px;
            min-height: 200px;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            max-width: 240px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;

        }
    </style>
</head><!--/head-->

<body>
<header id="header"><!--header-->
    <div class="header_top"><!--header_top-->
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="contactinfo">
                        <ul class="nav nav-pills">
                            <li><a href="#"><i class="fa fa-phone"></i> 0977409690</a></li>
                            <li><a href="#"><i class="fa fa-envelope"></i> petshop@gmail.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="social-icons pull-right">
                        <ul class="nav navbar-nav">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header_top-->
    <div class="header-middle"><!--header-middle-->
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="logo pull-left">
                        <a href="<?php echo base_url() ;?>frontend/home"><img src="<?php echo $path ;?>images/home/logo.png" alt="" /></a>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="shop-menu pull-right">
                        <ul class="nav navbar-nav">

                            <?php if(!$is_logged_in) {
                                ?>
                                <li><a href="<?php echo base_url() ;?>frontend/user/register"><i class="fa fa-user"></i>Registration</a></li>
                                <li><a href="#" onclick="login()"><i class="fa fa-lock"></i>Login</a></li>
                            <?php
                            } else {
                                ?>
                            <li><a href="<?php echo base_url() ;?>frontend/purchase/cart"><i class="fa fa-shopping-cart"></i> Cart</a></li>
                            <li><a href="<?php echo base_url() ;?>frontend/user/userInformation"><span>Hello, </span><b style="color: orange"> <?php echo $fullname?></b></a></li>
                            <li><a href="<?php echo base_url() ;?>frontend/user/logout">Log Out</a></li>
                            <?php
                            }?>


                        </ul>
                        <div id="loginBox" class="dropdown-menu1" style="display: none">
                            <form accept-charset="UTF-8" action="/petshop/frontend/user/register" method="post">
                                <input name="form_type" type="hidden" value="customer_login">
                                <input name="utf8" type="hidden" value="✓">
                                <div id="bodyBox">
                                    <ul class="control-container customer-accounts list-unstyled">
                                        <li class="clearfix" style="margin-top: 10px">
                                            <label for="username_login" class="control-label">Username <span class="req">*</span></label>
                                            <input type="text" value="" name="username_login" class="form-control">
                                        </li>
                                        <li class="clearfix" style="margin-top: 10px">
                                            <label for="password_login" class="control-label">Password <span class="req">*</span></label>
                                            <input type="password" value="" name="password_login" class="form-control password">
                                        </li>
                                        <li class="clearfix last1" style="margin-top: 20px">
                                            <button name="submit" value="login" class="btn btn-default" style="background: #FE980F;
                                                                                                    border: medium none;
                                                                                                    border-radius: 0;
                                                                                                    color: #FFFFFF;
                                                                                                    display: block;
                                                                                                    font-family: 'Roboto', sans-serif;
                                                                                                    padding: 6px 25px;" type="submit">Login</button>
                                            <span>or</span>
                                            <a href="<?php echo base_url() ;?>frontend/user/forget">Forgot Password ?</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-middle-->


    <div class="header-bottom"><!--header-bottom-->
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="mainmenu pull-left">
                        <ul class="nav navbar-nav collapse navbar-collapse">
                            <li><a href="<?php echo base_url() ;?>frontend/home" class="active">Home</a></li>
                            <li class="dropdown"><a href="<?php echo base_url() ;?>frontend/news">News</a>

                            </li>
                            <li class="dropdown"><a href="<?php echo base_url() ;?>frontend/promotion">Promotion</a>
                            </li>
                            <li><a href="<?php echo base_url() ;?>frontend/contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="search_box pull-right">
                        <form action="<?php echo base_url() ;?>frontend/home/search"><input type="text" name="q" placeholder="Search" value="<?php if (isset($query)) echo $query?>"/></form>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-bottom-->
</header><!--/header-->
<script type="text/javascript">
    $('#loginBox').fadeOut();
    var x = false;
    function login(){
        if (!x)
        {
            $('#loginBox').fadeIn()
            x = true;
        }
        else {
            $('#loginBox').fadeOut();
            x = false;
        }
    }
</script>
<!--/slider-->
<!--<section id="slider">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="slider-carousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#slider-carousel" data-slide-to="1"></li>
                        <li data-target="#slider-carousel" data-slide-to="2"></li>
                    </ol>

                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="col-sm-6">
                                <h1><span>E</span>-SHOPPER</h1>
                                <h2>Free E-Commerce Template</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                <button type="button" class="btn btn-default get">Get it now</button>
                            </div>
                            <div class="col-sm-6">
                                <img src="<?php /*echo $path ;*/?>images/home/girl1.jpg" class="girl img-responsive" alt="" />
                                <img src="<?php /*echo $path ;*/?>images/home/pricing.png"  class="pricing" alt="" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-6">
                                <h1><span>E</span>-SHOPPER</h1>
                                <h2>100% Responsive Design</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                <button type="button" class="btn btn-default get">Get it now</button>
                            </div>
                            <div class="col-sm-6">
                                <img src="<?php /*echo $path ;*/?>images/home/girl2.jpg" class="girl img-responsive" alt="" />
                                <img src="<?php /*echo $path ;*/?>images/home/pricing.png"  class="pricing" alt="" />
                            </div>
                        </div>

                        <div class="item">
                            <div class="col-sm-6">
                                <h1><span>E</span>-SHOPPER</h1>
                                <h2>Free Ecommerce Template</h2>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                                <button type="button" class="btn btn-default get">Get it now</button>
                            </div>
                            <div class="col-sm-6">
                                <img src="<?php /*echo $path ;*/?>images/home/girl3.jpg" class="girl img-responsive" alt="" />
                                <img src="<?php /*echo $path ;*/?>images/home/pricing.png" class="pricing" alt="" />
                            </div>
                        </div>

                    </div>

                    <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
                        <i class="fa fa-angle-left"></i>
                    </a>
                    <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
                        <i class="fa fa-angle-right"></i>
                    </a>
                </div>

            </div>
        </div>
    </div>
</section>-->
<section>
<div class="container">
<div class="row">
<div class="col-sm-3">
    <div class="left-sidebar">
        <h2>Category</h2>
        <div class="panel-group category-products" id="accordian"><!--category-productsr-->

            <?php foreach($product_type as $type) { ?>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordian" href="#">
                                <?php echo $type["product_type_name"]?>
                            </a>
                        </h4>
                    </div>

                    <div class="panel-body">
                        <ul>
                            <?php foreach($product_categories as $category) {
                                if ($category["product_type_id"] ==$type["product_type_id"]) {?>
                                <li><a href="<?php echo base_url() ;?>frontend/home/listProduct/<?php echo $category["product_category_id"] ?>"><?php echo $category["product_category_name"] ?> </a></li>
                            <?php } }?>
                        </ul>
                    </div>

                </div>
            <?php } ?>
        </div><!--/category-products-->
        <div class="shipping text-center"><!--shipping-->
            <img src="<?php echo $path ;?>images/home/shipping.jpg" alt="" />
        </div><!--/shipping-->

    </div>
</div>
<div class="col-sm-9 padding-right">
    <?php echo $content_for_layout;?>
</div>
<div class="row">
</div>
</div>
    <!--recommended_items-->
<!--<div class="recommended_items">
    <h2 class="title text-center">recommended items</h2>

    <div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend1.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend2.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend3.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend1.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend2.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="product-image-wrapper">
                        <div class="single-products">
                            <div class="productinfo text-center">
                                <img src="<?php /*echo $path ;*/?>images/home/recommend3.jpg" alt="" />
                                <h2>$56</h2>
                                <p>Easy Polo Black Edition</p>
                                <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
            <i class="fa fa-angle-left"></i>
        </a>
        <a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
            <i class="fa fa-angle-right"></i>
        </a>
    </div>
</div>-->
    <!--/recommended_items-->
</div>
</section>
<footer id="footer"><!--Footer-->
<!--    <div class="footer-top">-->
<!--        <div class="container">-->
<!--            <div class="row">-->
<!--                <div class="col-sm-2">-->
<!--                    <div class="companyinfo">-->
<!--                        <h2><span>e</span>-shopper</h2>-->
<!--                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-sm-7">-->
<!--                    <div class="col-sm-3">-->
<!--                        <div class="video-gallery text-center">-->
<!--                            <a href="#">-->
<!--                                <div class="iframe-img">-->
<!--                                    <img src="--><?php //echo $path ;?><!--images/home/iframe1.png" alt="" />-->
<!--                                </div>-->
<!--                                <div class="overlay-icon">-->
<!--                                    <i class="fa fa-play-circle-o"></i>-->
<!--                                </div>-->
<!--                            </a>-->
<!--                            <p>Circle of Hands</p>-->
<!--                            <h2>24 DEC 2014</h2>-->
<!--                        </div>-->
<!--                    </div>-->
<!---->
<!--                    <div class="col-sm-3">-->
<!--                        <div class="video-gallery text-center">-->
<!--                            <a href="#">-->
<!--                                <div class="iframe-img">-->
<!--                                    <img src="--><?php //echo $path ;?><!--images/home/iframe2.png" alt="" />-->
<!--                                </div>-->
<!--                                <div class="overlay-icon">-->
<!--                                    <i class="fa fa-play-circle-o"></i>-->
<!--                                </div>-->
<!--                            </a>-->
<!--                            <p>Circle of Hands</p>-->
<!--                            <h2>24 DEC 2014</h2>-->
<!--                        </div>-->
<!--                    </div>-->
<!---->
<!--                    <div class="col-sm-3">-->
<!--                        <div class="video-gallery text-center">-->
<!--                            <a href="#">-->
<!--                                <div class="iframe-img">-->
<!--                                    <img src="--><?php //echo $path ;?><!--images/home/iframe3.png" alt="" />-->
<!--                                </div>-->
<!--                                <div class="overlay-icon">-->
<!--                                    <i class="fa fa-play-circle-o"></i>-->
<!--                                </div>-->
<!--                            </a>-->
<!--                            <p>Circle of Hands</p>-->
<!--                            <h2>24 DEC 2014</h2>-->
<!--                        </div>-->
<!--                    </div>-->
<!---->
<!--                    <div class="col-sm-3">-->
<!--                        <div class="video-gallery text-center">-->
<!--                            <a href="#">-->
<!--                                <div class="iframe-img">-->
<!--                                    <img src="--><?php //echo $path ;?><!--images/home/iframe4.png" alt="" />-->
<!--                                </div>-->
<!--                                <div class="overlay-icon">-->
<!--                                    <i class="fa fa-play-circle-o"></i>-->
<!--                                </div>-->
<!--                            </a>-->
<!--                            <p>Circle of Hands</p>-->
<!--                            <h2>24 DEC 2014</h2>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="col-sm-3">-->
<!--                    <div class="address">-->
<!--                        <img src="--><?php //echo $path ;?><!--images/home/map.png" alt="" />-->
<!--                        <p>505 S Atlantic Ave Virginia Beach, VA(Virginia)</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="footer-widget">
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div class="single-widget">
                        <h2>Service</h2>
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">Online Help</a></li>
                            <li><a href="#">Contact Us</a></li>
                            <li><a href="#">Order Status</a></li>
                            <li><a href="#">Change Location</a></li>
                            <li><a href="#">FAQ’s</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="single-widget">
                        <h2>Quock Shop</h2>
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">T-Shirt</a></li>
                            <li><a href="#">Mens</a></li>
                            <li><a href="#">Womens</a></li>
                            <li><a href="#">Gift Cards</a></li>
                            <li><a href="#">Shoes</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="single-widget">
                        <h2>Policies</h2>
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">Terms of Use</a></li>
                            <li><a href="#">Privecy Policy</a></li>
                            <li><a href="#">Refund Policy</a></li>
                            <li><a href="#">Billing System</a></li>
                            <li><a href="#">Ticket System</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="single-widget">
                        <h2>About Shopper</h2>
                        <ul class="nav nav-pills nav-stacked">
                            <li><a href="#">Company Information</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#">Store Location</a></li>
                            <li><a href="#">Affillate Program</a></li>
                            <li><a href="#">Copyright</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3 col-sm-offset-1">
                    <div class="single-widget">
                        <h2>About Shopper</h2>
                        <form action="#" class="searchform">
                            <input type="text" placeholder="Your email address" />
                            <button type="submit" class="btn btn-default"><i class="fa fa-arrow-circle-o-right"></i></button>
                            <p>Get the most recent updates from <br />our site and be updated your self...</p>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="footer-bottom">
        <div class="container">
            <div class="row">
                <p class="pull-left">Copyright © 2014 PETSHOP. All rights reserved.</p>
                <p class="pull-right">Designed by <span><a target="_blank" href="https://www.facebook.com/svamp.ari">Shroom</a></span></p>
            </div>
        </div>
    </div>

</footer><!--/Footer-->

<script src="<?php echo $path ;?>js/bootstrap.min.js"></script>
<script src="<?php echo $path ;?>js/jquery.scrollUp.min.js"></script>
<script src="<?php echo $path ;?>js/price-range.js"></script>
<script src="<?php echo $path ;?>js/jquery.prettyPhoto.js"></script>
<script src="<?php echo $path ;?>js/main.js"></script>
</body>
</html>